<template>
  <div>
    <van-nav-bar title left-text="返回" left-arrow @click-left="onClickLeft" />

    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      show-action
      shape="round"
      @search="onSearch"
      @focus="focus()"
    >
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>
    <div id="shipping" v-show="info2">
      <van-index-bar :index-list="indexList">
        <van-index-anchor index="1">A</van-index-anchor>
        <van-cell title="A.Lange&Sohone/朗格" to="/dity" />
        <van-cell title="Audemars Piguet/爱彼" to="/dity" />
        <van-cell title="Alexander McQueen/亚力" to="/dity" />

        <van-index-anchor index="2">B</van-index-anchor>
        <van-cell title="B.Lange/Sohne/宝诗龙" to="/dity" />
        <van-cell title="B.Lange/Sohne/宝诗龙" to="/dity" />
        <van-cell title="B.Lange/Sohne/宝诗龙" to="/dity" />
        <van-cell title="B.Lange/Sohne/宝诗龙" to="/dity" />
        <van-cell title="B.Lange/Sohne/宝诗龙" to="/dity" />
        <van-cell title="B.Lange/Sohne/宝诗龙" to="/dity" />
        <van-cell title="B.Lange/Sohne/宝诗龙" to="/dity" />
        <van-index-anchor index="3">C</van-index-anchor>
        <van-cell title="Chanel/香奈儿" to="/dity" />
        <van-cell title="CARTIER/卡地亚" to="/dity" />
        <van-cell title="Chanel/香奈儿" to="/dity" />
        <van-cell title="CARTIER/卡地亚" to="/dity" />
      </van-index-bar>
    </div>
    <div id="imglist" v-show="info4">
      <van-grid :border="false" :column-num="1">
        <van-grid-item to="/dity">
          <van-image
            style="width:100%;"
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563854416073&di=a94c9b16bcabdc042f53074ea0057c2f&imgtype=0&src=http%3A%2F%2Fmeiti.fabumao.cn%2F1134462%2F20190101154505308.jpg"
          />
        </van-grid-item>
      </van-grid>
      <van-divider>品牌推荐</van-divider>
      <van-grid :gutter="10">
        <van-grid-item
          v-for="value in 8"
          :key="value"
          icon="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563854416073&di=a94c9b16bcabdc042f53074ea0057c2f&imgtype=0&src=http%3A%2F%2Fmeiti.fabumao.cn%2F1134462%2F20190101154505308.jpg"
          text="劳力士"
          @click="cop()"
        />
      </van-grid>
    </div>
    <div id="imglist" v-show="info3">
      <van-grid :border="false" :column-num="1">
        <van-grid-item>
          <van-image
            style="width:100%;"
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563854359984&di=557354fb8f451226cc42128130b5db70&imgtype=0&src=http%3A%2F%2Fimg13.wbiao.cn%2Farticle%2F201503%2F17%2F142659794966869.png"
          />
        </van-grid-item>
      </van-grid>
      <van-divider>品牌推荐</van-divider>
      <van-grid :gutter="10">
        <van-grid-item
          v-for="value in 8"
          :key="value"
          icon="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563854359984&di=cece943853a1c00e49c787b648f01e05&imgtype=0&src=http%3A%2F%2Ffile1.youboy.com%2Fe%2F2014%2F9%2F6%2F6%2F206389.jpg"
          text="香奈儿"
          @click="cop()"
        />
      </van-grid>
    </div>
    <div id="imglist" v-show="info">
      <van-grid :border="false" :column-num="1">
        <van-grid-item>
          <van-image
            style="width:100%;"
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563854508453&di=094c78e8ee1e58eb0268be8fb3f41f84&imgtype=0&src=http%3A%2F%2Fwww.xbiao.com%2Fimages%2Fpc%2Fjewelry%2Fback%2F1000_350_dior.jpg"
          />
        </van-grid-item>
      </van-grid>
      <van-divider>品牌推荐</van-divider>
      <van-grid :gutter="10">
        <van-grid-item
          v-for="value in 8"
          :key="value"
          icon="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563854503635&di=c84e623da7521a1e1494d05cc7d88d20&imgtype=0&src=http%3A%2F%2Fimg.11665.com%2Fimg01_p%2Fi1%2F19147030971215522%2FT1fAKNXrlfXXXXXXXX_%2521%25210-item_pic.jpg"
          text="迪奥"
          @click="cop()"
        />
      </van-grid>
    </div>
    <van-sidebar v-model="activeKey">
      <van-sidebar-item @click="top1()" title="品牌" />
      <van-sidebar-item @click="top2()" title="品牌推荐" />
      <van-sidebar-item @click="top3()" title="名包" />
      <van-sidebar-item @click="top4()" title="名表" />
      <van-sidebar-item title="饰品" />
      <van-sidebar-item title="名鞋" />
      <van-sidebar-item title="其他" />
    </van-sidebar>
    <van-tabbar v-model="active" :fixed="true">
      <van-tabbar-item icon="home-o" @click="tab1()">首页</van-tabbar-item>
      <van-tabbar-item icon="search"  @click="tab2()">分类</van-tabbar-item>
      <van-tabbar-item icon="friends-o"  @click="tab3()">购物车</van-tabbar-item>
      <van-tabbar-item icon="setting-o"  @click="tab4()">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "classes",
  data() {
    return {
      activeKey: 0,
      active: 0,
      value: "",
      info: false,
      info2: true,
      info3: false,
      info4: false,
      indexList: []
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSearch() {},
    top1() {
      this.info = false;
      this.info3 = false;
      this.info2 = true;
      this.info4 = false;
    },
    top2() {
      this.info = true;
      this.info2 = false;
      this.info4 = false;
      this.info3 = false;
    },
    top3() {
      this.info3 = true;
      this.info2 = false;
      this.info = false;
      this.info4 = false;
    },
    top4() {
      this.info4 = true;
      this.info3 = false;
      this.info2 = false;
      this.info = false;
    },
    cop() {},
    focus() {
      this.$router.push("/search");
    },
    tab1(){
      this.$router.push('/index')
    },
    tab2(){
      // this.$router.push('/index')
    },
    tab3(){
      this.$router.push('/cart')
    },
    tab4(){
      this.$router.push('/my')
    },
  },
  comments: {}
};
</script>
<style scoped>
#shipping {
  float: right;
  width: 77%;
  height: 100%;
  /* position:absolute; */
  top: 0;
}

#imglist {
  width: 77%;
  height: 100%;
  float: right;
}
</style>
